<template>
<div class="head-cp">
    <img
        class="left-img"
        :src="'https://s2.loli.net/2021/12/05/oH7tL3Ged6avOzb.jpg'"
        @click="toPath">
    <div class="right-container">
        <router-link
            :class="{
                'item':true,
                'active-item':$route.name==item.name || true,
            }"
            v-for="(item,index) in optionList.slice(0,3)"
            :key="index"
            :to="item.path">
            {{item.title}}
        </router-link>
        <div 
            class="more-bt"
            ref="MoreShowBt"
            @click="onMore">
            <svg 
                t="1640228610892" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1198" 
                width="25" height="25"><path d="M128 192h768v128H128V192z m0 256h512v128H128V448z m0 256h768v128H128v-128z m576-320l192 128-192 128V384z" 
                fill="#13227a" p-id="1199"></path>
            </svg>
        </div>
    </div>
    <div
        v-show="moreShow"
        class="more-container"
        ref="MoreContainer">
        <router-link
            :class="{
                'item':true,
                'active-item':$route.name==item.name || true,
            }"
            @click.native="moreShow=false"
            v-for="(item,index) in optionList.slice(3)"
            :key="index"
            :to="item.path">
            {{item.title}}
        </router-link>
    </div>
</div>
</template>

<script>
/*
 头部组件
 */
export default {
    name: 'Head',
    data() {
        return {
            optionList:[
                {
                    title:'政策查询',
                    path:'/123',
                    name:'policy',
                },
                {
                    title:'政策查询',
                    path:'/123',
                },
                {
                    title:'政策查询',
                    path:'/123',
                },
                {
                    title:'政策查询',
                    path:'/123',
                },
                {
                    title:'政策查询',
                    path:'/123',
                },
            ],
            moreShow:false,
        };
    },
    mounted(){
        this.initEvent();
    },
    methods: {
        initEvent(){
            let moreShowBt = this.$refs.MoreShowBt;
            let MoreContainer = this.$refs.MoreContainer;
            document.addEventListener('click', e => {  //判断点击事件的包含关系
                e = e || window.event;
                //如果点击事件不在容器上和点击按钮上则隐藏容器
                if (!moreShowBt.contains(e.target) && !MoreContainer.contains(e.target)) {
                    this.moreShow = false;
                }
            });
        },
        onMore(){
            this.moreShow = !this.moreShow;
        },
        toPath(){
            this.$router.push({ 
                path:'/'
            });
        },
    }
}
</script>

<style scoped lang="scss">
.head-cp{
    --head-height: 65px;
    --head-border-color: #c5c5c5;
    --head-border-radius:12px;
    display: flex;
    height: fit-content;
    justify-content: space-between;
    align-items: center;
    width:580px;
    height: var(--head-height);
    backdrop-filter: blur(5px);
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid var(--head-border-color);
    border-radius: var(--head-border-radius);
    position: relative;
    text-align: left;
    >.left-img{
        width: 40px;
        height: 40px;
        cursor: pointer;
        border-radius: var(--head-border-radius);
    }
    >.right-container{
        display: flex;
        align-items: center;
        >.item{
            margin-left: 15px;
            font-size: 15px;
            color: rgb(42, 50, 65);
        }
        >.active-item{
            position: relative;
            z-index: 0;
            &::after{
                content: '';
                position: absolute;
                left: -5px;
                bottom: -2px;
                width: 70%;
                height: 10px;
                // background-color: rgb(0, 213, 142);
                background-color: rgb(214, 214, 214);
                z-index: -1;
                border-radius: 3px;
            }
        }
        >.more-bt{
            font-size: 14px;
            cursor: pointer;
            margin-left: 15px;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            border: 1px solid var(--head-border-color);
            border-radius: 10px;
            padding: 3px;
        }
    }
    >.more-container{
        display: grid;
        position: absolute;
        top: calc(var(--head-height) + 5px);
        right: 0;
        background-color: white;
        padding: 10px 0;
        box-sizing: border-box;
        border: 1px solid var(--head-border-color);
        border-radius: var(--head-border-radius);
        font-size: 14px;
        >.item{
            padding: 5px 10px;
            transition: all 0.2s;
            cursor: pointer;
            &:hover{
                background-color: rgb(242, 242, 242);
            }
        }
        >.active-item{
            background-color: rgb(242, 242, 242);
        }
    }
}
</style>
